<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" class="search-form" label-width="90px">
        <el-row :gutter="20" style="display: flex">
          <div style="flex: 1;margin-top: 5px;">
            <el-form-item label="商户Id">
              <el-input :maxlength="20" v-model="searchForm.pay_status" style="margin-bottom: 10px;"
                placeholder="请输入商户Id" clearable />
            </el-form-item>
            <el-form-item label="申请类型">
              <el-select clearable v-model="searchForm.type" placeholder="请选择申请类型">
                <el-option v-for="item in [
                    { label: '上架', value: 1 },
                    { label: '下架', value: 2 },
                  ]" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请状态">
              <el-select clearable v-model="searchForm.status" placeholder="请选择申请状态">
                <el-option v-for="item in [
                    { label: '审核中', value: 1 },
                    { label: '已通过', value: 2 },
                    { label: '已拒绝', value: 3 },
                  ]" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div :span="5" style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="resettingWay">重置</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div style="margin-top: 20px">
      <el-row class="marginBottom" :gutter="20" style="display: flex">
        <el-col :span="24" style="float: right">
          <div class="right-panel el-button-group">
            <el-button class="" icon="el-icon-refresh" size="mini" @click="resettingWay"></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" v-loading="loading" highlight-current-row :data="orderList" style="width: 100%">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
              :min-width="tableTheadOptions[fruit].minwidth" align="center">
              <template slot-scope="scope">
                <div v-if="tableTheadOptions[fruit].label == '申请类型'">
                  <span v-if="scope.row.type == 1">上架</span>
                  <span v-if="scope.row.type == 2">下架</span>
                </div>
                <div v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" align="center">
              <template slot-scope="scope">
                <span>
                  <span style="color: #67c23a;" v-if="scope.row.status == 2">已通过</span>
                  <span style="color: #0076f6;" v-if="scope.row.status == 1">待审核</span>
                  <span style="color: #f56c6c;" v-if="scope.row.status == 3">已驳回</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" v-hasPermi="'applyof/shenhe'">
                  <!-- <el-popconfirm title="确定要同意该申请嘛？" @confirm="agreeDeteil(scope.row)"> -->
                    <el-button type="text" @click="agreeDeteil(scope.row)">同意</el-button>
                  <!-- </el-popconfirm> -->
                  <!-- <el-popconfirm title="确定驳回该申请嘛？" @confirm="rejectDeteil(scope.row)"> -->
                    <el-button style="margin: 0 10px" type="text" @click="rejectDeteil(scope.row)">驳回</el-button>
                  <!-- </el-popconfirm> -->
                </span>
                <el-button type="text" @click="goodsDeteil(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin-top: 20px">
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
          @pagination="getListWay" />
      </el-row>
    </div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="信息详情" size="65%" :withHeader="false"
      :visible.sync="orderDialog" @close="closing_point_details" :show-close="true">
      <div class="drawerTitle">
        <span>信息详情</span>
        <div class="close" @click="closing_point_details">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <div class="informationTitleView">
          <div class="leftBox" style="padding-left: 10px;">
            <div class="leftborder"></div>
            <div class="text">商品信息</div>
          </div>
          <div class="right"></div>
        </div>
        <div style="position: relative;margin-left: 20px;" v-loading="orderDialogLoading">
          <el-descriptions :column="1">
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商品名称">
              {{ orderDetail.merchant_goods ?  orderDetail.merchant_goods.mgsl_name : '-'}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2">
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商品编码">
              {{ orderDetail.merchant_goods ?  orderDetail.merchant_goods.product_code : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商品规格">
              {{ orderDetail.goods_product ?  orderDetail.goods_product.name : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="规格单位">
              {{ orderDetail.goods_product ?  orderDetail.goods_product.unit : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="上架库存">
              {{ orderDetail.inventory }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="寄售价格">
              {{ orderDetail.consign_price }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">审核信息</div>
            </div>
            <div class="right"></div>
          </div>
          <el-descriptions :column="2">
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="审核ID">
              {{ orderDetail.id }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商品ID">
              {{ orderDetail.mer_goods_id }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商户ID">
              {{ orderDetail.mer_id }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商户名称">
              {{ orderDetail.merchant ? orderDetail.merchant.name : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商户负责人">
              {{ orderDetail.merchant ? orderDetail.merchant.user_name : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="商户电话">
              {{ orderDetail.merchant ? orderDetail.merchant.user_cellphone : '-'}}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="创建时间">
              {{ orderDetail.created_at }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="申请类型">
              <span v-if="orderDetail.type == 1">上架</span>
              <span v-else>下架</span>
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
              label="申请状态">
              <span v-if="orderDetail.status == 1">审核中</span>
              <span v-else-if="orderDetail.status == 2">已通过</span>
              <span v-else>已拒绝</span>
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="备注">
              {{ orderDetail.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-scrollbar>
      <div style="text-align: right;padding-right: 30px;">
        <span v-if="orderDetail.status == 1">
          <el-button type="success" @click="agreeDeteil(orderDetail)">同意</el-button>
          <el-button style="margin: 0 10px" type="danger" @click="rejectDeteil(orderDetail)">驳回</el-button>
        </span>
        <el-button type="primary" @click="orderDialog = false">关闭</el-button>
      </div>
    </el-drawer>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="驳回意见" size="50%" :withHeader="false"
      :visible.sync="rejectdialog" @close="closing_view" :show-close="true">
      <div class="drawerTitle" style="margin-bottom: 20px;">
        <span>驳回意见</span>
        <div class="close" @click="closing_view">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <div style="position: relative" v-loading="rejectLoading">
        <el-form class="search-form" label-width="90px">
          <el-form-item label="驳回说明">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.remark" style="width: 500px;">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center;margin-top: 50px;">
        <el-button style="width: 100px;" type="primary" :loading="rejectLoading" @click="rejectSubmit">确定</el-button>
      </div>
    </el-drawer>

    <!-- <el-dialog title="运费设置" :visible.sync="dialogfree" width="600px" :before-close="CloseDialogLabel"> -->
      <el-drawer :modal-append-to-body="false" :append-to-body="true" title="运费设置" size="40%" :withHeader="false"
        :visible.sync="dialogfree" @close="CloseDialogLabel" :show-close="true">
        <div class="drawerTitle" style="margin-bottom: 30px;">
          <span>运费设置</span>
          <div class="close" @click="CloseDialogLabel">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      <el-form ref="form" label-width="100px" :model="form" :rules="logisticsRules">
        <el-form-item label="运费设置：" prop="shipping_type" style="margin-top: 15px">
          <el-radio-group v-model="form.shipping_type" @change="shipping_typeChange">
            <el-radio :label="1">固定运费</el-radio>
            <el-radio :label="2">运费模版</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="运费设置：" v-if="form.shipping_type == 1" prop="shipping_fee">
          <el-input type="number" v-model="form.shipping_fee" placeholder="请输入运费" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="运费模版：" v-if="form.shipping_type == 2" prop="freight_template_id">
          <el-select @change="changefreight" v-model="form.freight_template_id" placeholder="请选择运费模版"
            style="width: 300px">
            <el-option v-for="item in freight_template" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-left: 100px;margin-top: 100px;">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button type="primary" :loading="addPutLoading" @click="submitFormClass()">确 定</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  import {
    getShelfList,
    editShelfapply,
    getShelfDetail,
  } from "@/api/merchant/index";
  import {
    freightgetList,
  } from "@/api/supplier/index";
  import {
    getDictionaryTypeList
  } from "@/api/index";
  const tableTheadOption = {
    created_at: {
      label: "创建时间",
      field: "created_at",
      minwidth: '150px'
    },
    id: {
      label: "审核ID",
      field: "id",
    },
    mer_goods_id: {
      label: "商品ID",
      field: "mer_goods_id",
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
    },
    mgp_id: {
      label: "商品规格ID",
      field: "mgp_id",
    },
    mer_id: {
      label: "商户ID",
      field: "mer_id",
    },
    mer_name: {
      label: "商户名称",
      field: "mer_name",
    },
    goods_category_id: {
      label: "平台商品分类ID",
      field: "goods_category_id",
    },
    inventory: {
      label: "上架数量",
      field: "inventory",
    },
    consign_price: {
      label: "寄售价格",
      field: "consign_price",
    },
    type: {
      label: "申请类型",
      field: "type",
    },
    // status: {
    //   label: "申请状态",
    //   field: "status",
    // },
    admin_id: {
      label: "后台管理员ID",
      field: "admin_id",
    },
    remark: {
      label: "备注",
      field: "remark",
    },
  };

  const allTableThead = [
    "created_at",
    "id",
    "mer_name",
    "mer_goods_id",
    "mgp_id",
    "mer_id",
    "goods_name",

    "goods_category_id",
    "inventory",
    "consign_price",
    "type",
    // "status",
    "admin_id",
    "remark",
  ];
  const defaultTableThead = [

    // "id",
    "mer_name",
    "goods_name",

    "inventory",
    "consign_price",
    "type",
    "created_at",
    // "status",
    // "admin_id",
    "remark",
  ];
  export default {
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
      },
    },
    data() {
      return {
        addPutLoading: false,
        dialogfree: false,
        // 动态显示表头默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        searchDisplay: false,
        searchForm: {
          page: 1, //分页页码，数字类型
          count: 10, //每页数量
          mer_id: "", //商户ID
          type: "", //申请类型(1.上架,2.下架)
          status: "", //申请状态(1.审核中,2.已通过,3.已拒绝)
        },
        orderList: [],
        freight_template: [],
        total: 0,
        // 支付类型列表
        payTypeList: [],
        // 订单详情
        orderDialog: false,
        orderDialogLoading: false,
        orderDetail: {},
        form: {
          id: "", //商户商品上架审核ID
          status: "", //申请状态(1.审核中,2.已通过,3.已拒绝)
          remark: "", //备注
          shipping_type: 1,
          shipping_fee: '',
          freight_template_id: '',
        },
        logisticsRules: {
          shipping_type: [{
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          }, ],
          freight_template_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择运费信息"));
              }
              callback();
            },
            trigger: "change",
          }, ],
          shipping_fee: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请填写运费信息"));
              }
              callback();
            },
            trigger: "change",
          }, ],
        },
        rejectdialog: false,
        rejectLoading: false,
      };
    },
    created() {
      this.loading = true;
      this.getfreelist();
      getDictionaryTypeList({
        type: "pay_type"
      }).then((res) => {
        this.payTypeList = res.data;
        this.getListWay();
      });
    },
    methods: {
      closing_view(){
        this.rejectdialog = false
      },
      closing_point_details() {
        this.orderDialog = false
      },
      // 运费设置回调
      shipping_typeChange(val) {
        if (val === 1) {
          this.form.freight_template_id = "";
        } else {
          this.form.shipping_fee = "";
        }
        this.form.shipping_type = val;
      },
      //切换运费模版ID
      changefreight(val) {
        this.form.freight_template_id = val;
      },
      //运费列表
      getfreelist() {
        freightgetList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {

            return this.$messages.error(res.msg);
          }

          this.freight_template = res.data.list;
        });
      },
      getListWay() {
        this.loading = true;
        getShelfList(this.searchForm).then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.orderList = res.data.list;
          this.total = res.data.total;
        });
      },
      // 重置搜索表单
      resettingWay() {
        this.searchForm = {
          page: 1, //分页页码，数字类型
          count: 10, //每页数量
          mer_id: "", //商户ID
          type: "", //申请类型(1.上架,2.下架)
          status: "", //申请状态(1.审核中,2.已通过,3.已拒绝)
        };
        this.checkboxTableThead = defaultTableThead;
        console.log(defaultTableThead);
        this.getListWay();
      },
      CloseDialogLabel() {
        this.dialogfree = false
      },
      // 同意
      agreeDeteil(row) {
        this.form.id = row.id;
        this.form.status = 2;
        // this.form.status = 2;
        this.form.remark = "";
        this.dialogfree = true

      },
      submitFormClass() {
        this.$refs.form.validate((valid, error) => {
          if (valid) {
            this.editDeteil();
          } else {
            this.$messages.error('请填写运费信息');
          }
        });

      },
      // 驳回
      rejectDeteil(row) {
        this.form.id = row.id;
        this.form.status = 3;
        this.form.remark = "";
        this.rejectdialog = true;
      },
      rejectSubmit() {
        this.rejectLoading = true;
        this.editDeteil();
      },
      editDeteil() {
        this.loading = true;
        this.addPutLoading = true;
        editShelfapply(this.form).then((res) => {
          this.loading = false;
          this.rejectLoading = false;
          this.rejectdialog = false;
          this.addPutLoading = false;
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.orderDialog = false;
          this.dialogfree = false
          this.$messages.success(res.msg);
          this.getListWay();
        });
      },
      goodsDeteil(row) {
        this.orderDialog = true;
        this.orderDialogLoading = true;
        getShelfDetail({
          mer_id: row.mer_id,
          id: row.id
        }).then((res) => {
          this.orderDialogLoading = false;
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.orderDetail = res.data;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>
